<template>
	<view class="page">
		<!-- 不带边框并矩形显示 -->
		<uni-grid :column="2" :show-border="false" :square="false">
			<uni-grid-item><uni-tag text="社区动态" :type="typeIndex == 0 ? 'error' : 'default'" :circle="true" @click="serviceType(0)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="商家动态" :type="typeIndex == 1 ? 'error' : 'default'" :circle="true" @click="serviceType(1)"></uni-tag></uni-grid-item>
		</uni-grid>
		<!-- 添加动态悬浮按钮 -->
		<view v-show="typeIndex == 0"><uni-fab horizontal="right" @fabClick="toCreateComments"></uni-fab></view>
		<!-- 业主的评论 -->
		<view class="evalution" v-show="typeIndex == 0">
			<view class="eva-list" :class="{ Skeleton: !loaded }">
				<view v-for="(item, index) in commentsList" :key="index" class="eva-item">
					<image :src="item.owner.ownerIcon" mode="aspectFill"></image>
					<view class="eva-right">
						<text>{{ item.owner.ownerName }}</text>
						<text>{{ item.comTime | formatDate2 }}</text>
						<view class="zan-box">
							<text>{{ item.totalCount }}</text>
							<text class="yticon icon-pinglun-copy" @click="showReply(item.commentId)"></text>
						</view>
						<!--图片有就显示，没有就不显示 -->
						<image v-show="item.pic" style="width: 100%;height: 260rpx;border-radius: 25rpx;" :src="item.pic"></image>
						<text class="content">{{ item.comComment }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商家的的评论 -->
		<view class="evalution" v-show="typeIndex == 1">
			<view class="eva-list" :class="{ Skeleton: !loaded }">
				<view v-for="(item, index) in merCommentsList" :key="index" class="eva-item">
					<image v-show="item.merchant.merchantIcon" :src="item.merchant.merchantIcon" mode="aspectFill"></image>

					<view class="eva-right">
						<text>{{ item.merchant.merchantName }}</text>
						<text>{{ item.createTime | formatDate2 }}</text>
						<view class="zan-box"></view>
						<image v-show="item.picture" style="width: 100%;height: 260rpx;border-radius: 25rpx;" :src="item.picture"></image>
						<text class="content">{{ item.merActComment }}</text>
						<text style="color: #0081FF;" @click="toMerChant(item.merchantId)">查看详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
export default {
	components: { uniGrid, uniGridItem, uniTag, uniLoadMore, uniFab },
	data() {
		return {
			loaded: false,
			typeIndex: 0,
			commentsList: [],
			merCommentsList: []
		};
	},
	//页面加载之后的操作
	onLoad() {
		//加载默认加载业主动态
		this.getComments();
		//加载商家动态数据
		this.getMerComments();
	},
	methods: {
		//加载业主动态数据的方法
		getComments() {
			uni.request({
				url: this.baseurl + '/comment/all',
				success: res => {
					this.commentsList = res.data.data;
				}
			});
		},
		//加载商家动态数据的方法
		getMerComments() {
			uni.request({
				url: this.baseurl + '/merComments/all',
				success: res => {
					this.merCommentsList = res.data.data;
				}
			});
		},
		toMerChant(merchantId) {
			uni.showToast({
				title: '商家详情:' + merchantId,
				duration: 1500
			});
		},
		serviceType(index) {
			this.typeIndex = index;
			//根据不同类型加载替换数据
		},
		//跳转到添加动态页面
		toCreateComments() {
			if (this.$store.state.userInfo.ownerId) {
				uni.navigateTo({
					url: 'createComments'
				});
			} else {
				uni.navigateTo({
					url: '../public/login-name'
				});
			}
		},
		//展示所有回复,可能需要传参
		showReply(parentId) {
			//根据传入的参数查询某个动态的所有回复
			uni.navigateTo({
				url: 'commentDetail?parentId=' + parentId
			});
		}
	}
};
</script>

<style lang="scss">
.section-tit {
	font-size: $font-base + 2upx;
	color: $font-color-dark;
	margin-bottom: 30upx;
	text-align: center;
}
.evalution {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 16upx;
	padding: 40upx 0;
}

.eva-item {
	display: flex;
	padding: 20upx 40upx;
	image {
		width: 60upx;
		height: 60upx;
		border-radius: 50px;
		flex-shrink: 0;
		margin-right: 24upx;
	}
}
.eva-right {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: $font-sm + 2upx;
	color: $font-color-light;
	position: relative;
	.zan-box {
		display: flex;
		align-items: base-line;
		position: absolute;
		top: 10upx;
		right: 10upx;
		.yticon {
			margin-left: 8upx;
		}
	}
	.content {
		font-size: $font-base;
		color: #333;
		padding-top: 20upx;
	}
}
</style>
